<template>
	<view class="rexian-content">
		<tn-nav-bar fixed :isBack="false">相册</tn-nav-bar>
		<view class="container" v-if="dataList.length">
		<view class="tn-flex tn-flex-direction-row tn-padding-sm  tn-margin-bottom item-v" v-for="(item, index) in dataList" :key="index" :class="index==0?'fristview':''">
		   <view class="infos-v">
				<customHeader :name="item.createUserName" :tags="item.tags" :time="item.createdTime"></customHeader>
				<!-- <view class="tn-margin-bottom-sm blogger__item">
					<u-album :urls="item.images" maxCount="9" rowCount="3" multipleSize="100" singleSize="240" keyName="src"></u-album>
				</view> -->
				<view style="margin-top: 22rpx;">
					<imgGrid :imgList="item.images"></imgGrid>
				</view>
				<!-- <view class="tn-flex tn-flex-direction-row tn-flex-direction-row tn-margin-bottom-sm">
					<text class="tn-padding-right-sm tags-v" v-for="(tags, idx) in item.tagsList">{{tags}}</text>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-flex-row-between tn-margin-bottom-sm tn-margin-bottom-sm">
					<text class="minifont">{{item.createdTime}}</text>
					<text class="minifont" v-show="item.createUserName">{{item.createUserName}}老师发布</text>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-flex-row-between tn-margin-bottom-sm" v-if="userInfo.userId == item.createdUserId">
					<text class="minifont"></text>
					<text class="minifont delete-view" @click="deletefunc(item)">删除</text>
				</view>
				<view class="line-view"></view> -->
		   </view>
		</view>
		</view>
		<view class=" tn-flex tn-flex-row-center fullhouse paddtops" v-else>
			<tn-empty mode="data"></tn-empty>
		</view>
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center">
			<text class="tn-icon-close" @click="previewImg=''"></text>
			<tn-swiper class="thswiper" :current="currentPic" :height="windowHeight?windowHeight:800" :list="imglist" :autoplay="false" imageMode="widthFix"></tn-swiper>
			
			<tn-button class="fabu__btn" width="100rpx" height="100rpx" backgroundColor="tn-cool-bg-color-7" :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="downloadpic"><text class="tn-icon-download"></text></tn-button>
			
		</view>
		
		<tn-button class="fabu__btn" v-if="loginType == 1" width="100rpx" height="100rpx" backgroundColor="tn-cool-bg-color-7" :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="gofabu"><text class="tn-icon-camera"></text></tn-button>
		
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	import customHeader from './components/header.vue'
	import imgGrid from './components/imgGrid.vue'
	export default {
		name: 'rexian',
		components:{customHeader,imgGrid},
		data(){
			return {
				currenttab: 0,
				dataList: [],
				imageTitle: '',
				previewImg: '',
				showpopup: false,
				banjilist: [],
				showtnpopup: false,
				pinglunneirong: '',
				huifuItem: null,
				pageIndex: 1,
				totalPage:1,
				selectBanjiList: [],
				loginType: 2,
				userInfo: {},
				tuid: '08db9d35-8fbc-4236-8a7d-eb9dbb9b4ba5',
				imglist: [],
				currentPic: 0,
				windowWidth: 800,
				windowHeight: 800,
				showSkeleton: false,
			}
		},
		onLoad() {
			let that = this;
			uni.getSystemInfo({
				success: (res) => {
					console.log('res ----------- ',res)
					this.windowHeight = (res.windowHeight * (750/res.windowWidth)-200)
					this.windowWidth = res.windowWidth
				}
			})
		},
		onShow() {
			let that = this;
			uni.getSystemInfo({
				success: (res) => {
					console.log('res -----------*** ',res)
					that.windowHeight = (res.windowHeight * (750/res.windowWidth)-200)
					that.windowWidth = res.windowWidth
				}
			})
			this.userInfo = uni.getStorageSync('userInfo');
			this.loginType = uni.getStorageSync('loginType');
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			// this.getbanjiFenlei();
			console.log(this.userInfo)
		},
		onPullDownRefresh() {
			// this.pageIndex = 1
			// this.getrenwulist();
			// console.log('下拉刷新------')
		},
		onReachBottom() {
			// this.pageIndex++;
			// this.getrenwulist();
			// console.log('上啦更多-------')
		},
		mounted() {
			let that = this;
			uni.getSystemInfo({
				success: (res) => {
					console.log('res -----------*** ',res)
					that.windowHeight = (res.windowHeight * (750/res.windowWidth)-200)
					that.windowWidth = res.windowWidth
				}
			})
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo)
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.loginType = uni.getStorageSync('loginType');
			console.log('this.loginType === ',this.loginType)
		},
		methods:{
			upper(){
				console.log('upper------')
				this.queryFunction();
				console.log('下拉刷新------')
			},
			lower(){
				console.log('lower------')
				this.pageIndex++;
				this.getrenwulist();
				console.log('上啦更多-------')
			},
			scroll(){
				// console.log('scroll-==========')
			},
			showImage(item,image_item,image_index){
				console.log(item)
				this.currentPic = image_index
				this.previewImg = image_item.src;
				this.imglist = item.images
			},		
			changetab(index){
				this.currenttab = index
				this.queryFunction()
			},
			getbanjiFenlei(){
				this.request({
					url: '/SysClasses/List',
					method: 'get',
					params: {
						isArchived: false
					},
				}).then(res => {
					if(res.code == 200){
						this.banjilist = res.data.map(item => {
							item.children = []
							item.selected = false
							return item
						});
					}
					
					this.getrenwulist()
				})
			},
			gofabu(){
				console.log(123)
				uni.navigateTo({
					url: '/pagesA/yuanwuduan/fabuxiangce'
				})
			},
			openSetting() {
			  let _this = this;
			  uni.getSetting({
			    success(res) {
					console.log('res.authSetting === ',res.authSetting)
			      if (!res.authSetting['scope.writePhotosAlbum']) {
			        uni.authorize({
			          scope: 'scope.writePhotosAlbum',
			          success(res) {
			            // 授权成功
			            uni.showToast({title: '授权成功',icon: 'none',duration: 2200});
						_this.saveImageToPhotosAlbum(_this.imglist[_this.currentPic].src)
			          },
			          fail() {
			            uni.showModal({
			              content: '检测到您没打开相册功能权限，是否去设置打开？',
			              confirmText: "确认",
			              cancelText: '取消',
			              success: (res) => {
			                if (res.confirm) {
			                  uni.openSetting({
			                    success: (res) => {
			                      if (res.authSetting['scope.writePhotosAlbum']) {
									_this.saveImageToPhotosAlbum(_this.imglist[_this.currentPic].src)
			                      } else {
			                        //用户未同意保存图片权限
			                      }
			                    },
			                    fail: (err) => {
			                      console.log(err)
			                    }
			                  })
			                } else {
			                  uni.showToast({
			                    title: '获取授权相册授权失败',
			                    icon: 'none',
			                    success: function() {
			                      uni.navigateBack()
			                    }
			                  })
			                }
			              }
			            })
			          }
			        })
			      } else {
					_this.saveImageToPhotosAlbum(_this.imglist[_this.currentPic].src)
			      }
			    },
			    fail() {
			      uni.showToast({
			        title: '获取授权相机授权失败',
			        icon: 'none',
			        success: function() {
			          uni.navigateBack()
			        }
			      })
			    }
			  })
			},
			downloadpic(){
				this.saveImageToPhotosAlbum(this.imglist[this.currentPic].src)
			},
			saveImageToPhotosAlbum(filePathsrc) {
							uni.downloadFile({
								url: filePathsrc,
								header: {
									"content-type": "application/json",
								},
								success: (res) => {
									let filePath = res.tempFilePath;
									uni.saveImageToPhotosAlbum({
										filePath, // 暂不支持网络图片/本地图片地址，需与.downloadFile一起使用
										success: (res) => {
											uni.showToast({
												title: "成功保存到本地相册"
											});
										},
										fail: (err) => {
											console.log(err.errMsg)
											let errType = err.errMsg.includes(
													"saveImageToPhotosAlbum:fail cancel"
												) ?
												"取消保存" :
												"保存失败";
											uni.showModal({
												title: errType,
												content: err.errMsg,
												showCancel: false,
											});
										},
									});
								},
								fail: (err) => {
									uni.showModal({
										title: "下载出错",
										content: err.errMsg,
										showCancel: false,
									});
								},
							});
						},
			deletefunc(item){
				this.request({
					url: '/ClassAlbum/Delete',
					method: 'post',
					params: [{id: item.id}],
				}).then(res => {
					if(res.code == 200){
						this.$refs.toast.show({
						  title: '',
						  content: '删除成功',
						  icon: 'success',
						  image: '',
						  duration: 1000
						})
						this.queryFunction()
					}
				})
			},
			queryFunction(){
				this.pageIndex = 1
				this.getrenwulist()
			},
			getrenwulist(){
				if(this.totalPage > 0 && this.pageIndex > this.totalPage){
					this.$refs.toast.show({
					  title: '',
					  content: '没有更多了',
					  icon: '',
					  image: '',
					  duration: 1000
					})
					uni.stopPullDownRefresh()
					return;
				}
				this.showSkeleton = true
				let params = {
					PageNo: this.pageIndex,
					PageSize: 10
				}
				if(this.loginType == 2){
					params.IsParent = true
				}else{
					params.IsParent = false
				}
				this.request({
					url: '/ClassAlbum/Page',
					method: 'get',
					params: params,
				}).then(res => {
						if(res.code == 200){
							if(this.pageIndex == 1){
								this.dataList = [];
							}
							let rows = res.data.rows;
							this.totalPage = res.data.totalPage;
							rows.forEach(item => {
								if(item.images && item.images.length){
									item.images.forEach(_img => {
										_img['src'] = this.imageTitle + _img.filedId;
										_img['image'] = this.imageTitle + _img.filedId;
										_img['title'] = _img.fileName
									})
								}
								if(item.tags){
									item.tagsList = item.tags.split(',')
								}else{
									item.tagsList = []
								}
								this.dataList.push(item);
							})
						}
						uni.stopPullDownRefresh()
					
					this.showSkeleton = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rexian-content{
		background-color: #F6F6F6;
	}
	.container{
		padding: 0 26rpx;
		padding-bottom: 52px;
		overflow: hidden;
	}
	.avatar-v{
		width: 150rpx;
		text-align: center;
	}
	.infos-v{
		width: 100%;
	}
	.item-v{
		color: #555555;
		background-color: #fff;
		border-radius: 16rpx;
	}
	.border-line-view{
		width: 100%;
		height: 0;
		border-bottom: 1px solid #eeeeee;
	}
  .fabu__btn{
	  position: fixed;
	  bottom: 30%;
	  right: 10px;
  }
	  .blogger {
	    &__item {
	      padding: 0;
		  margin-top:22rpx;
	    }
	    
	    &__author {
	      &__btn {
	        margin-right: -12rpx;
	        opacity: 0.5;
	      }
	    }
	    
	    &__desc {
	      line-height: 55rpx;
	      
	      &__label {
	        padding: 0 20rpx;
	        margin: 0rpx 18rpx 0 0;
	        
	        &--prefix {
	          color: #00FFC8;
	          padding-right: 10rpx;
	        }
	      }
	      &__content {
	        
	      }
	    }
	    
	    &__content {
	      margin-top: 18rpx;
	      padding-right: 18rpx;
	      
	      &__data {
	        line-height: 46rpx;
	        text-align: justify;
	        overflow: hidden;
	        transition: all 0.25s ease-in-out;
	      }
	      
	      &__status {
	        margin-top: 10rpx;
	        font-size: 26rpx;
	        color: #82B2FF;
	      }
	    }
	    
	    &__main-image {
	      border-radius: 16rpx;
	      
	      &--1 {
	        max-width: 80%;
	        max-height: 300rpx;
	      }
	      
	      &--2 {
	        max-width: 260rpx;
	        max-height: 260rpx;
	      }
	      
	      &--3 {
	        height: 180rpx;
	        width: 100%;
	      }
	    }
	    
	    &__count-icon {
	      font-size: 40rpx;
	      padding-right: 5rpx;
	    }
	    
	    &__ad {
	      width: 100%;
	      height: 500rpx;
	      transform: translate3d(0px, 0px, 0px) !important;
	      
	      ::v-deep .uni-swiper-slide-frame {
	        transform: translate3d(0px, 0px, 0px) !important;
	      }
	      .uni-swiper-slide-frame {
	        transform: translate3d(0px, 0px, 0px) !important;
	      }
	      
	      &__item {
	        position: absolute;
	        width: 100%;
	        height: 100%;
	        transform-origin: left center;
	        transform: translate3d(100%, 0px, 0px) scale(1) !important;
	        transition: transform 0.25s ease-in-out;
	        z-index: 1;
	        
	        &--0 {
	          transform: translate3d(0%, 0px, 0px) scale(1) !important;
	          z-index: 4;
	        }
	        &--1 {
	          transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
	          z-index: 3;
	        }
	        &--2 {
	          transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
	          z-index: 2;
	        }
	      }
	      
	      &__content {
	        border-radius: 40rpx;
	        width: 640rpx;
	        height: 500rpx;
	        overflow: hidden;
	      }
	      
	      &__image {
	        width: 100%;
	        height: 100%;
	      }
	    }
		}
	.line-view{
		width: 100%;
		padding-top: 10rpx;
		border-bottom: 2px dotted #aaaaaa;
	}
	.huifu{
		font-size: 24rpx;
		.yzhft{
			font-size: 26rpx;
		}
	}
	.bottom-view{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 100rpx;
			background-color: rgba(245, 245, 245, 1);
	}
	.tab-cls{
		width: 40%;
	}
	.pop-content{
		height: 500rpx;
		overflow-y: auto;
	}
	  .image-check-view{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  background-color: rgba(1, 1, 1, 1);
		  &.active{
			  background-color: rgba(255,255,255, 1);
		  }
		  .tn-icon-close{
			  position: absolute;
			  top: 180rpx;
			  right: 50rpx;
			  font-size:34px;
			  z-index: 888;
			  color: #ff0000;
			  line-height: 36rpx;
		  }
		  .tn-icon-download-simple{
			  position: absolute;
			  bottom: 130rpx;
			  right: 30rpx;
			  font-size:28px;
			  z-index: 899;
			  color: #ffffff;
			  line-height: 36rpx;
		  }
	  }
	.tags-v{
		font-size: 26rpx;
		color: #01BEFF;
	}
	.minifont{
		font-size: 26rpx;
	}
	.color-m-v{
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
	.delete-view{
		color: #E83A30;
	}
	.thswiper{
		width: 100%;
	}
	.scroll-Y{
		height: 100vh;
	}
	.paddtops{
		padding-top: 100px;
	}
	.fristview{
		margin-top: 105px;
	}
</style>